<template>
  <ex-dialog
    width="800px"
    class="ex-diolog"
    :title="title"
    :visible="visible"
    @closeDialog="handleClose"
  >	
		<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
      <el-form-item label="活动名称:" prop="name">
				<el-input type="text" v-model="ruleForm.name" autocomplete="off" placeholder="填写活动名称"></el-input>
			</el-form-item>
      <el-form-item label="活动图片" prop="img">
          <el-upload class="avatar-uploader2" :action="action" :show-file-list="false" :on-success="imgSuccess"
            :on-error="onError" :on-progress="onProgress" :multiple="false">
            <img class="banner_img" :src="ruleForm.img" alt="" v-if="ruleForm.img">
            <i class="el-icon-plus" style="font-size: 28px" v-else v-loading="imgLoading"></i>
          </el-upload>
      </el-form-item>
			<el-form-item label="H5活动链接:" prop="url">
				<el-input type="text" v-model="ruleForm.url" autocomplete="off" placeholder="请填写H5活动链接"></el-input>
			</el-form-item>
      <el-form-item label="小程序活动链接:" prop="wechatUrl">
				<el-input type="text" v-model="ruleForm.wechatUrl" autocomplete="off" placeholder="请填写小程序活动链接"></el-input>
			</el-form-item>
      <el-form-item label="是否显示:" prop="isShow">
				<el-switch
          v-model="ruleForm.isShow"
          active-text="是"
          inactive-text="否"
          active-value="1"
          inactive-value="2">
        </el-switch>
			</el-form-item>
		  <el-form-item label="排序:" prop="sort">
				<el-input type="text" v-model="ruleForm.sort" autocomplete="off" placeholder="填写排序"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm('ruleForm')" :loading="loading">确认</el-button>
				<el-button @click="handleClose('ruleForm')">取消</el-button>
			</el-form-item>
		</el-form>
  </ex-dialog>
</template>
<script>
// components
import Loading from '@/components/Loading/index'
// api
import {
  addSelectionActivities,
  editSelectionActivities,
  activityDetail,
} from '@/api/blindBox/selectionActivities'

export default {
  components: {
    Loading
  },
  props: {
    visible: Boolean,
    id: String,
    pathType: String,
  },
  data() {
    
    return {
      loading: false,
      typeList: [
        {id: 1,value: '支持竞猜'},
        {id: 2,value: '冠军竞猜'},
      ],
      roleList: [],
      action: process.env.VUE_APP_BASE_API + "/common/v1/upload",
      imgLoading: false,
			ruleForm: {
        id: '',//竞猜活动id
        img: '',//活动图片
        name: '',//活动名称
        isShow: '1',//是否显示 1 显示 2 隐藏
        sort: '',//	排序号
        url: '',//活动链接
        wechatUrl:'',//小程序活动链接
			},
			rules: {
          name: [
            { required: true,message: '请填写活动名称',trigger: 'blur' }
          ],
          img: [
            { required: true,message: '请上传活动图片', trigger: 'change' }
          ],
          isShow: [
            { required: true,message: '请选择', trigger: 'change' }
          ],
          url: [
            { required: true,message: '请填写H5活动链接',trigger: 'blur' }
          ],
          wechatUrl: [
            { required: true,message: '请填写小程序活动链接',trigger: 'blur' }
          ],
          sort: [
            { required: true,message: '请填写排序', trigger: 'change' }
          ],
        }
    }
  },
  computed: {
   
  },
  created() {
    this.ruleForm.id = this.id
    if(this.pathType == 'add'){
      this.title = '新增精选活动'
      this.ruleForm.id = ''
    }else{
      this.getDatail()
      this.title = '编辑精选活动'
    }
	},
  methods: {
    //获取详情
    getDatail(){
      var id = this.id
      activityDetail(id).then(res => {
        this.ruleForm = res.result
      })
    },
    imgSuccess(res, file) { //文件上传成功时
      console.log(res.result.url)
      this.ruleForm.img = res.result.url
      this.$refs.ruleForm.validateField('img')
      this.imgLoading = false
    },
    onProgress(file) { //文件上传时
      this.imgLoading = true
    },
    onError(file) {
      this.imgLoading = false
    },
    //新建子账号
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          if(this.pathType == 'add'){
            var data = {
            ...this.ruleForm
            }
            addSelectionActivities(data).then(res => {
             
              setTimeout(() => {
                this.handleClose()
                this.$message.success('创建成功')
                this.$emit('success')
                this.loading = false
              }, 1000);
            }).catch(()=> {
              this.loading = false
            }).finally(() => {

            })
          }else if(this.pathType == 'edit'){
            var data = {
            ...this.ruleForm
            }
            editSelectionActivities(data).then(res => {
              
              setTimeout(() => {
                this.$message.success('修改成功')
                this.handleClose()
                this.$emit('success')
                this.loading = false
              }, 1000);
            }).catch(()=> {
              this.loading = false
            }).finally(() => {

            })
          }
            
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    
		//取消
    handleClose(formName) {
      this.$emit('update:visible', false)
			// this.$refs[formName].resetFields();
    },
		//确认
		handleConfirm(){
			this.$emit('success', '你好')
		},
    handleSuccess(msg) {
      if (msg === '已拒绝') {
        var type = 'error'
      } else {
        var type = 'success'
      }
      this.$message({
        message: msg,
        type: type,
        duration: 1500,
        onClose: () => {
          this.handleClose()
          this.$emit('success')
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
		padding: 0 !important;
  }
	::v-deep .ex--dialog--main {
    padding: 10px 20px !important; 
  }
}
::v-deep .avatar-uploader2 .el-upload {
  width: 100% !important;
}

.avatar-uploader2 {
  width: 130px;
  height: 130px;
  text-align: center;
  line-height: 130px;
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
}

.banner_img {
  width: 130px;
  height: 130px;
}
.el-input{
  width: 300px;
}
</style>